<template>

  <el-card>
    <div slot="header" class="clearfix">
      <span>公众号分摊</span>
    </div>
    <div class="home-container">

      <div class="clearfix mb15">
        <v-searchForm
          :form-data="filter_info"
          :form-title="formTitle"
          @reset="reset"
          @search="search"
        />
      </div>
      <v-tableBtns
        :show-export="false"
        :table-title="exportTitle"
        :table-data="exportData"
        :on-export="handleExport"
      />
      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        @sortChange="sortChange"
        :deletable="false"
        :readable="true"
        :editable="false"
        @read="read"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>

  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import axios from '@/utils/request'
  // import axios from 'axios'

  export default {
    name: 'Home',
    components: {UploadExcelComponent},
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        formTitle: [
          {
            cn: '公众号id：',
            en: 'mpid'
          },
          {
            cn: '公众号名称：',
            en: 'name'
          },
          {
            cn: '初次买量时间：',
            en: 'created_at',
            type: 'time'
          }
        ],
        filter_info: {},
        tableTitle: [
          {
            cn: 'id',
            en: 'mpid',
            sortable: true
          },
          {
            cn: '公众号名称',
            en: 'name',
            sortable: true
          },
          {
            cn: '买号价格',
            en: 'mpsmoney',
            sortable: true
          },
          {
            cn: '买量价格',
            en: 'fansmoney',
            sortable: true
          },
          // {
          //   cn: '初次买量时间',
          //   en: 'fanstime',
          //   sortable: true
          // },
          {
            cn: '周期',
            en: 'cycle'
          },
          {
            cn: '当月成本',
            en: 'mpsbanlance',
            sortable: true
          }
          // {
          //     cn: '上月收入',
          //     en: 'last_income',
          // },
          // {
          //     cn: '累计收入',
          //     en: 'total_income',
          // },
        ],
        tableData: [],
        // 排序
        sidx: 'mpid',
        sortKey: null,

        exportTitle: [
          {
            cn: '合同编号',
            en: '合同编号'
          },
          {
            cn: '合同总金额',
            en: '合同总额'
          },
          {
            cn: '开票公司(对方公司)',
            en: '开票公司'
          },
          {
            cn: '核销总金额',
            en: '核销金额'
          },
          {
            cn: '税点',
            en: '税点'
          },
          {
            cn: '税额',
            en: '税额'
          },
          {
            cn: '待摊销金额',
            en: '待摊销金额'
          },
          {
            cn: '形式',
            en: '形式'
          },
          {
            cn: '对应公众号',
            en: 'mpsname'
          },
          {
            cn: '月摊销金额',
            en: '本月成本'
          },
          {
            cn: '分摊开始时间',
            en: 'start_time'
          },
          {
            cn: '结束时间',
            en: 'end_time'
          },
          {
            cn: '累计摊销',
            en: '累计成本'
          },
          {
            cn: '剩余摊销金额',
            en: '剩余成本'
          }
        ],
        exportData: []
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.startDate = origin[key][0]
            data.endDate = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList() {
        const loading = this.$loading()

        const datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey,
        }
        this.$get('action/Gather/dataGrid', datas)
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.cycle = '60月'
                return item
              })
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow
            }

            this.tableData = list || [];
              loading.close()
          })
          .catch(_ => {
            loading.close()
          })
      },
      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.getTableList()
      },

      read(val) {
        console.log(val)
        this.$router.push({
          name: 'cost_manage.summary.preview',
          query: {id: val.row.mpid}
        })
      },
      handleExport() {
        const data = this.filter_infos;

        this.$get('action/BuympsRecord/GetFile', data)
          .then(res1 => {
            console.log(data);
            return res1.data;
          })
          .then(data1 => {
            this.$get('action/BuyfansRecord/GetFile', data)
              .then(res2 => {
                const data2 = res2.data;
                this.exportData = res.data.list.map((item, index) => {
                  item.per_month_cost = item.fansbalance + item.mpsbanlance
                  return item
                })
                this.exportData = []
              })
              .catch(err => {
                this.exportData = []
              })
          })
      },
      // 排序
      sortChange({column, prop, order}) {
        this.sidx = prop || 'mpid'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    },

  }
</script>
